/* === Pages === */
.page,
.page-group {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #efeff4;
  display: none;
  overflow: hidden;
}
.page.page-current,
.page-group.page-current,
.page.page-visible,
.page-group.page-visible,
.page.page-from-center-to-left,
.page-group.page-from-center-to-left,
.page.page-from-center-to-right,
.page-group.page-from-center-to-right,
.page.page-from-right-to-center,
.page-group.page-from-right-to-center,
.page.page-from-left-to-center,
.page-group.page-from-left-to-center {
  display: block;
}
.page.page-current,
.page-group.page-current {
  overflow: hidden;
}
.page-group {
  display: block;
}
.page-transitioning,
.page-transitioning .swipeback-page-shadow {
  transition: 400ms;
}
.page-from-right-to-center {
  animation: pageFromRightToCenter 400ms forwards;
  z-index: 2002;
}
.page-from-center-to-right {
  animation: pageFromCenterToRight 400ms forwards;
  z-index: 2002;
}
@keyframes pageFromRightToCenter {
  from {
    transform: translate3d(100%, 0, 0);
    opacity: .9;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes pageFromCenterToRight {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(100%, 0, 0);
    opacity: .9;
  }
}
.page-from-center-to-left {
  animation: pageFromCenterToLeft 400ms forwards;
}
.page-from-left-to-center {
  animation: pageFromLeftToCenter 400ms forwards;
}
@keyframes pageFromCenterToLeft {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0.5;
    transform: translate3d(-20%, 0, 0);
  }
}
@keyframes pageFromLeftToCenter {
  from {
    opacity: .5;
    transform: translate3d(-20%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
